<template>
  <view class="message-page">
    <up-navbar title="消息" @rightClick="rightClick" placeholder :autoBack="true">
      <template #right>
        <view class="message-header">
          <image src="@/static/home/icon/clear.png" mode="" v-if="isRead"></image>
          <image src="@/static/home/icon/cleared.png" mode="" v-else></image>
          <view class="header-name" :style="isRead? 'color:#666666':'color:#CCCCCC'">一键已读</view>
        </view>
      </template>
    </up-navbar>
    <view class="message-content" v-show="isRead">
      <view class="message-nav" v-for="(item,index) in orderList" :key="item.id" @click="onRead(item)">
        <view class="nav-head">
          <view class="head-name">系统信息</view>
          <view class="head-logo"></view>
        </view>
        <view class="nav-content">{{item.desc}}</view>
        <view class="nav-label">
          <view class="label-time">{{item.create_time}}</view>
          <view class="label-title"> 查看详情 <up-icon name="arrow-right" size="32rpx" color="#999"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="message-none" v-show="!isRead">
      <image src="@/static/home/image/messageNone.png" mode=""></image>
      <view class="none-name">暂无消息内容</view>
    </view>
  </view>
</template>

<script setup>
  import {
    messageList,
    messageRead,
    messageReadAll
  } from './api.js'
  import {
    ref
  } from 'vue'
  import {
    articleList
  } from './mock.js';
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app';
  const orderList = ref([])
  const isRead = ref()
  const messageId = ref()

  function rightClick() {
    if (orderList.value.length <= 0) {
      uni.showToast({
        title: "暂无未读消息",
        icon: 'none'
      })
    } else {
      uni.showModal({
        title: "一键已读",
        content: "确定清空全部新消息提醒吗？",
        success: (async (res) => {
          if (res.confirm) {
            const data = await messageReadAll()
            if (data && data.code == 1) {
              orderList.value = []
              isRead.value = false
              uni.showToast({
                title: "全部消息已标为已读",
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: data.msg,
                icon: 'none'
              })
            }
          }
        })
      })
    }
  }

  onShow(() => {
    messageListApi()
  })

  function onRead(item) {
    messageId.value = item.id
    if (item.type == 1) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyExport?id=${item.task_id}`
      })
      messageReadApi()
    } else if (item.type == 2) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyResult?id=${item.task_id}`
      })
      messageReadApi()
    } else {
      messageListApi()
    }
  }
  const messageReadApi = (async () => {
    const res = await messageRead({
      message_id: messageId.value
    })
    if (res && res.code === 1) {

    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })

  const messageListApi = (async () => {
    const res = await messageList()
    if (res && res.data) {
      isRead.value = res.data.length > 0 ? true : false
      orderList.value = res.data
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
</script>

<style lang="scss" scoped>
  .message-page {
    height: 100%;
    display: flex;
    flex-direction: column;


    .message-header {
      display: flex;
      align-items: center;

      image {
        height: 32rpx;
        width: 32rpx;
      }

      .header-name {
        font-size: 28rpx;
        font-weight: 400;
        color: #666;
        margin-left: 8rpx;
      }
    }

    .message-content {
      flex: 1;
      box-sizing: border-box;
      padding: 0 30rpx;
      width: 100%;
      overflow: scroll;

    }

    .message-nav {
      width: 690rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 24rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 30rpx;

      .nav-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .head-name {
          font-size: 34rpx;
          font-weight: 500;
          color: #333;

        }

        .head-logo {
          width: 12rpx;
          height: 12rpx;
          border-radius: 20rpx;
          background: #FF4D4F;
          margin-right: 14rpx;

        }
      }

      .nav-content {
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .nav-label {
        width: 100%;
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 30rpx;
        border-top: 2rpx solid #ebebeb;
        font-size: 28rpx;
        font-weight: 400;
        color: #999;

        .label-title {
          display: flex;

        }
      }
    }

    .message-none {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40%;

      image {
        height: 280rpx;
        width: 280rpx;

      }

      .none-name {
        font-size: 28rpx;
        font-weight: 400;
        color: #666;
        margin-top: 24rpx;

      }
    }
  }
</style>